<template>
  <Popup
    ref="popRef"
    title="作品详情"
    width="600px"
    async
    @close="$emit('close')"
    :confirmLoading="loading"
    :showFooter="props.type !== 'view'"
  >
    <el-skeleton :rows="10" animated v-if="loading" />

    <div v-else style="height: 600px; overflow-y: scroll">
      <custom-title title="作品信息" style="margin-bottom: 20px" />

      <el-descriptions column="1">
        <el-descriptions-item
          label-class-name="common_label_desc"
          label="作品预览:"
        >
          <el-image
            style="width: 100px; height: 100px"
            :src="data?.image_url"
            :preview-src-list="[data?.image_url]"
          />
        </el-descriptions-item>
        <el-descriptions-item
          class-name="common_value_desc"
          label-class-name="common_label_desc"
          label="作品ID:"
          >{{ data.id }}</el-descriptions-item
        >
        <el-descriptions-item
          class-name="common_value_desc"
          label-class-name="common_label_desc"
          label="作品类型:"
          >{{ data.type === "1" ? "文生图" : "图生图" }}</el-descriptions-item
        >
        <el-descriptions-item
          class-name="common_value_desc"
          label-class-name="common_label_desc"
          label="优秀作品:"
          >{{ data.is_fine === 1 ? "是" : "否" }}</el-descriptions-item
        >
        <el-descriptions-item
          class-name="common_value_desc"
          label-class-name="common_label_desc"
          label="创建时间:"
        >
          {{ dayjs(data.create_time * 1000).format("YYYY-MM-DD HH:mm:ss") }}
        </el-descriptions-item>
      </el-descriptions>

      <custom-title title="基础参数" style="margin-bottom: 20px" />
      <el-descriptions column="1">
        <el-descriptions-item
          class-name="common_value_desc"
          label-class-name="common_label_desc"
          label="描述词:"
          >{{ data.prompt_desc }}</el-descriptions-item
        >
        <el-descriptions-item
          class-name="common_value_desc"
          label-class-name="common_label_desc"
          label="反向词:"
          >未知字段</el-descriptions-item
        >

        <el-descriptions-item
          label-class-name="common_label_desc"
          label="图片尺寸:"
        >
          <div style="display: inline-block">
            <div class="common_value_desc_small">未知</div>
            <div class="common_value_desc_small" style="margin-left: 24px">
              {{ data?.scale }}
            </div>
          </div>
        </el-descriptions-item>

        <el-descriptions-item
          label-class-name="common_label_desc"
          label="主要模型:"
        >
          <div style="display: inline-block">
            <div class="common_value_desc_small">{{ data?.model }}</div>
            <div class="common_value_desc_small" style="margin-left: 24px">
              未知
            </div>
          </div>
        </el-descriptions-item>

        <el-descriptions-item
          class-name="common_value_desc"
          label-class-name="common_label_desc"
          label="微调模型:"
          >微调模型</el-descriptions-item
        >
      </el-descriptions>

      <custom-title title="高级参数" style="margin-bottom: 20px" />
      <!-- 绘画步数:，文本强度:采样模式:随机种子: -->
      <el-descriptions column="1">
        <el-descriptions-item
          class-name="common_value_desc"
          label-class-name="common_label_desc"
          label="绘画步数:"
          >{{ complexParamsJson.step ?? "-" }}</el-descriptions-item
        >
        <el-descriptions-item
          class-name="common_value_desc"
          label-class-name="common_label_desc"
          label="文本强度:"
          >{{ complexParamsJson.cfg_scale ?? "-" }}</el-descriptions-item
        >

        <el-descriptions-item
          class-name="common_value_desc"
          label-class-name="common_label_desc"
          label="采样模式:"
          >{{ complexParamsJson.seed ?? "-" }}</el-descriptions-item
        >
        <el-descriptions-item
          class-name="common_value_desc"
          label-class-name="common_label_desc"
          label="随机种子:"
          >{{ complexParamsJson.sampler_name ?? "-" }}</el-descriptions-item
        >
      </el-descriptions>
    </div>
  </Popup>
</template>

<script setup lang="ts">
import { getWorksDetail } from "@/api/consumer";
import feedback from "@/utils/feedback";
import type { FormInstance } from "element-plus";
import customTitle from "@/components/custom-title/index.vue";
import { useRequest } from "vue-hooks-plus";
import dayjs from "dayjs";
import { withDefaults, computed } from "vue";

interface Props {
  type?: string;
  selectId?: number;
}
const props = defineProps<Props>();

const { selectId } = props;

const emit = defineEmits(["close", "confirm"]);

//弹框ref
const popRef = shallowRef();

const complexParamsJson = reactive({});

// 获取详情
const { data, loading } = useRequest(
  async () => {
    if (!selectId) {
      return;
    }
    return await getWorksDetail({
      id: selectId,
    });
  },
  {
    refreshDeps: [selectId],
    onSuccess: (_res) => {
      if (_res.complex_params) {
        const jsonData = JSON.parse(_res.complex_params);
        complexParamsJson.step = jsonData.step;
        complexParamsJson.cfg_scale = jsonData.cfg_scale;
        complexParamsJson.seed = jsonData.seed;
        complexParamsJson.sampler_name = jsonData.sampler_name;
      }
    },
  }
);

//打开弹框
const open = () => {
  popRef.value.open();
};

defineExpose({ open });
</script>

<style scoped lang="scss">
.readonly_form {
  :deep(.el-input__wrapper) {
    box-shadow: none;
  }
}
</style>
